<template>
<div class="home">
    <v-Head></v-Head>
    <div class="bbody">
      <div class="new">
        <span>
          <img src="../img/laba.png" />
        </span>
        <div class="Carousel">
          <el-carousel height="60px" direction="vertical" :autoplay="true" style="width: 100%;" :interval="1000">
            <el-carousel-item v-for="(item, index) in notice" :key="index" style="position: relative;">
                <span>{{ item.title }}</span>
                <span
                  style="
                    position: absolute;
                    left: 380px;
                    display: inline-block;
                    width: 500px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                  >{{ item.content }}</span
                >
                <span style="position: absolute; left: 1000px">{{
                  item.createtime
                }}</span>
                <span style="position: absolute; left: 1230px; color: #4995F7;" @click="handleMore">更多</span>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="twice">
        <div class="twice-box">
          <img src="../img/1.png" />
          <div style="height: 80%; margin-top: 3%">
            <span
              style="
                font-size: 32px;
                font-weight: bolder;
                margin-left: 100px;
                margin-top: 10px;
              "
              >26</span
            >
            <br />
            <span style="margin-left: 100px; font-size: 14px">系统用户数</span>
          </div>
        </div>
        <div class="twice-box" style="margin-left: 0.7%">
          <img src="../img/2.png" />
          <div style="height: 80%; margin-top: 3%">
            <span
              style="
                font-size: 32px;
                font-weight: bolder;
                margin-left: 100px;
                margin-top: 10px;
              "
              >54</span
            >
            <br />
            <span style="margin-left: 100px; font-size: 14px">系统用户数</span>
          </div>
        </div>
        <div class="twice-box" style="margin-left: 0.7%">
          <img src="../img/3.png" />
          <div style="height: 80%; margin-top: 3%">
            <span
              style="
                font-size: 32px;
                font-weight: bolder;
                margin-left: 100px;
                margin-top: 10px;
              "
              >26</span
            >
            <br />
            <span style="margin-left: 100px; font-size: 14px">系统用户数</span>
          </div>
        </div>
        <div class="twice-box" style="margin-left: 0.7%">
          <img src="../img/4.png" />
          <div style="height: 80%; margin-top: 3%">
            <span
              style="
                font-size: 32px;
                font-weight: bolder;
                margin-left: 100px;
                margin-top: 10px;
              "
              >10</span
            >
            <br/>
            <span style="margin-left: 100px; font-size: 14px">系统用户数</span>
          </div>
        </div>
      </div>
      <div class="third">
        <div class="third-box">
          <div id="main"></div>
        </div>
        <div class="third-box" style="margin-left: 1.1%">
          <div id="main1"></div>
        </div>
        <div class="third-box" style="margin-left: 1.1%">
          <div id="main2"></div>
        </div>
      </div>
      <div class="forth">
        <div class="forth-box1">
          <div id="main3"></div>
        </div>
        <div class="forth-box2" style="padding: 20px; padding-top: 50px;">
          <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="repaircontent"
        label="维修内容"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createtime"
        label="保修时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="resultstatus"
        label="状态">
        <template slot-scope="scope"> 
          <span v-if="scope.row.resultstatus === 1"><el-tag type="success">已修复</el-tag></span>
          <span v-else><el-tag type="warning">待处理</el-tag></span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    style="margin-left: 150px;"
    layout="prev, pager, next"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :total="pages.total">
  </el-pagination>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import vHead from "../components/header.vue";
import * as echarts from "echarts";
import axios from "axios";
export default {
  data() {
    return {
      notice: [],
      msg: "Welcome to Your Vue.js App",
      tableData: [],
      pages:{
        total:0,
        currPage:0,
        pageNum:4
      }
    };
  },
  methods: {
    handleEcharts() {
      let myChart = echarts.init(document.getElementById("main"));
      let myChart1 = echarts.init(document.getElementById("main1"));
      let myChart2 = echarts.init(document.getElementById("main2"));
      let myChart3 = echarts.init(document.getElementById("main3"));
      let option = {
        title: {
          text: "小区分布统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "60%",
            data: [
              { value: 0, name: "A区 0幢", itemStyle: { color: "#D8ECFF" } },
              { value: 0, name: "B区 0幢", itemStyle: { color: "#B0F5AA" } },
              { value: 0, name: "C区 0幢", itemStyle: { color: "#339DFF" } },
              { value: 3, name: "D区 3幢", itemStyle: { color: "#F5DE6C" } },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 990,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      let option1 = {
        title: {
          text: "车位数/已分配量/已缴费",
          textStyle: {
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        xAxis: {
          type: "category",
          data: ["A区车位", "B区车位", "C区车位", "D区车位"],
        },
        series: [
          {
            name: "车位数",
            type: "bar",
            data: [19, 0, 1, 19],
            color: "#5470C6",
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#5470C6",
                fontSize: 10,
              },
            },
          },
          {
            name: "已分配量",
            type: "bar",
            data: [12, 0, 0, 15],
            color: "#91CC75",
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#91CC75",
                fontSize: 10,
              },
            },
          },
          {
            name: "已缴费",
            type: "bar",
            data: [0, 0, 0, 0],
            label: {
              show: true,
              position: "top",
              color: "#DDB7FA",
              textStyle: {
                color: "#DDB7FA",
                fontSize: 10,
              },
            },
          },
        ],
      };
      let option2 = {
        label: {
          show: true,
          color: "#25A6FF",
          formatter: function (params) {
            return params.value; // 直接显示数值
          },
        },
        title: {
          text: "缴费项目名单",
          right: 20,
          textStyle: {
            marginRight: 0,
          },
        },
        legend: {
          data: ["计费项目"],
          left: 0,
        },
        radar: {
          // shape: 'circle',
          splitArea: {
            show: true, // 是否显示分割区域
            areaStyle: {
              color: "#FFEEF3", // 设置分割区域的颜色和透明度
            },
          },

          indicator: [
            { name: "电费单", max: 12 },
            { name: "水费固定月单", max: 12 },
            { name: "水费按量单", max: 12 },
            { name: "天然气单", max: 12 },
            { name: "物业费单", max: 12 },
            { name: "宽带费单", max: 12 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [25, 19, 11, 8, 4, 22],
                name: "计费项目",
                areaStyle: {
                  opacity: 0.8, // 设置填充颜色的透明度
                  color: "#59C6FF",
                },
                lineStyle: {
                  width: 3,
                  color: "#59C6FF",
                },
              },
            ],
          },
        ],
      };
      let option3 = {
        title: {
          text: "当月用户访问情况",
          left: 30,
          textStyle: {
            marginRight: 0,
          },
        },
        legend: {
          data: ["用户访问量"],
        },
        toolbox: {
          show: true,
          iconStyle: {
            borderColor: "#49DDBF",
          },
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },

        xAxis: {
          type: "category",
          data: [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
          ],
        },
        yAxis: {
          type: "value",
          axisLine: {
            // 控制 Y 轴轴线的显示
            show: false, // 隐藏轴线
          },
        },
        series: [
          {
            name: "用户访问量",
            data: [
              0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 3, 6, 1, 0, 1, 0, 0, 4, 237, 0, 0,
              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
            ],
            type: "line",
            smooth: true,
            color: "#49DDBF",
          },
        ],
      };
      myChart.setOption(option);
      myChart1.setOption(option1);
      myChart2.setOption(option2);
      myChart3.setOption(option3);
      Window.onresize = () => {
        myChart.resize();
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
      };
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    getNotice() {
      axios
        .get(
          "http://community.byesame.com/poster/getPosterData?currPage=0&pageNum=100"
        )
        .then((response) => {
          // 将响应数据赋值给 items
          this.notice = response.data.data;
          console.log("大傻逼", this.notice);
          console.log("大傻逼逼", this.notice[0].title);
        })
        .catch((error) => {
          console.error("There was an error fetching the data!", error);
        });
    },
    getTableData() {
      axios
        .get(
          `http://community.byesame.com/poster/getRepairData?currPage=${this.pages.currPage}&pageNum=${this.pages.pageNum}`
        )
        .then((response) => {
          this.tableData = response.data.data;
          console.log("小傻逼", this.tableData);
          this.pages.total = response.data.total;
          console.log("小傻逼bi", this.pages.total);
        })
        .catch((error) => {
          console.error("There was an error fetching the data!", error);
        });
    },
    handleCurrentChange(val) {
      this.pages.currPage = val - 1;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.pages.pageNum = val;
      this.getTableData();
    },
    // 更多
    handleMore() {
      this.$router.push({ name: "postMessage" });
    }
  },
  created() {
    this.getNotice();
    this.getTableData();
  },
  mounted() {
    this.handleEcharts();
  },
  name: "index",
  components: {
    vHead,
  },
};
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .bbody {
    width: 100%;
    height: 100%;
    background: #ededed;
    .new {
      width: 100%;
      height: 60px;
      margin-top: 56px;
      background: #ffffff;
      display: flex;
      .Carousel {
        width: 100%;
        display: flex;
        .ul {
          width: 100%;
        }
        .ul1 > li {
          line-height: 60px;
          margin-left: 80px;
        }
      }
    }
    .twice {
      width: 98%;
      height: 112px;
      // background: #000;
      margin: 0 auto;
      margin-top: 12px;
      border-radius: 5px;
      display: flex;
      .twice-box {
        width: 25%;
        height: 100%;
        display: flex;
        background: #ffffff;
        border-radius: 5px;
      }
    }
    .third {
      width: 98%;
      height: 300px;
      border-radius: 5px;
      margin: 0 auto;
      margin-top: 12px;
      border-radius: 5px;
      display: flex;
      .third-box {
        width: 33%;
        height: 100%;
        border-radius: 5px;
        background: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        #main {
          width: 100%;
          height: 300px;
          padding-top: 10px;
        }
        #main1 {
          width: 100%;
          height: 300px;
          padding-top: 10px;
        }
        #main2 {
          width: 100%;
          height: 300px;
          padding-top: 10px;
        }
      }
    }
    .forth {
      width: 98%;
      height: 300px;
      border-radius: 5px;
      margin: 0 auto;
      margin-top: 12px;
      border-radius: 5px;
      display: flex;
      margin-bottom: 10px;
      .forth-box1 {
        width: 72%;
        height: 100%;
        border-radius: 5px;
        background: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        #main3 {
          width: 100%;
          height: 300px;
          padding-top: 20px;
        }
      }
      .forth-box2 {
        width: 28%;
        height: 93.3%;
        border-radius: 5px;
        background: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-left: 1.1%;
        padding-top: 20px;
      }
    }
  }
}
.el-carousel__item h3 {
  color: #475669 !important;
  font-size: 14px !important;
  opacity: 0.75 !important;
  line-height: 200px !important;
  margin: 0 !important;
}
  
  /* 使用 ::v-deep 穿透作用域样式 */
::v-deep .el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
/* 单独为 "维修内容" 列设置宽度 */
::v-deep .el-table__body-wrapper .el-table__row .el-table__cell:nth-child(1) {
  width: 100px !important;
}
</style>